<template>
  <div class="demo">
    <div class="demo-title">组合示例</div>
    <div class="demo-content">
      <PageHeader
        title="Title"
        class="site-page-header"
        sub-title="This is a subtitle"
        :avatar="{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }"
        :breadcrumb="{ routes }"
      >
        <template #tags>
          <Tag color="blue">Running</Tag>
        </template>
        <template #extra>
          <Button key="3">Operation</Button>
          <Button key="2">Operation</Button>
          <Button key="1" type="primary">Primary</Button>
          <Dropdown key="more">
            <Button :style="{ border: 'none', padding: 0 }">
              <EllipsisOutlined :style="{ fontSize: '20px', verticalAlign: 'top' }" />
            </Button>
            <template #overlay>
              <Menu>
                <Menu.Item>
                  <a target="_blank" rel="noopener noreferrer" href="https://design.ssc-hn.com">
                    1st menu item
                  </a>
                </Menu.Item>
                <Menu.Item>
                  <a target="_blank" rel="noopener noreferrer" href="https://design.ssc-hn.com">
                    2nd menu item
                  </a>
                </Menu.Item>
                <Menu.Item>
                  <a target="_blank" rel="noopener noreferrer" href="https://design.ssc-hn.com">
                    3rd menu item
                  </a>
                </Menu.Item>
              </Menu>
            </template>
          </Dropdown>
        </template>
        <Row class="content">
          <div style="flex: 1">
            <p>
              Ant Design interprets the color system into two levels: a system-level color system and
              a product-level color system.
            </p>
            <p>
              Ant Design&#x27;s design team preferred to design with the HSB color model, which makes
              it easier for designers to have a clear psychological expectation of color when
              adjusting colors, as well as facilitate communication in teams.
            </p>
            <div>
              <template v-for="item in iconLinks" :key="item.src">
                <a class="example-link">
                  <img class="example-link-icon" :src="item.src" :alt="item.text" />
                  {{ item.text }}
                </a>
              </template>
            </div>
          </div>
          <div class="image">
            <img
              src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
              alt="content"
              style="width: 100%"
            />
          </div>
        </Row>
      </PageHeader>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { EllipsisOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Dropdown from '@sscd/dropdown';
  import { Row } from '@sscd/grid';
  import Menu from '@sscd/menu';
  import Tag from '@sscd/tag';
  import PageHeader from '@sscd/page-header';
  interface IconLink {
    src: string;
    text: string;
  }
  const routes = [
    { path: 'list', breadcrumbName: 'First-level Menu' },
    { path: 'list', breadcrumbName: 'Second-level Menu' },
    { path: 'list', breadcrumbName: 'Third-level Menu' },
  ];
  const iconLinks: IconLink[] = [
    {
      src: 'https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg',
      text: 'Quick Start',
    },
    {
      src: 'https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg',
      text: 'Product Info',
    },
    {
      src: 'https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg',
      text: 'Product Doc',
    },
  ];
</script>

<style lang="less" scoped>
  .demo {
    .image {
      margin: 0 0 0 60px;
      display: flex;
      align-items: center;
    }
    .ant-page-header-rtl {
      .image {
        margin: 0 60px 0 0;
      }
      .example-link {
        float: right;
        margin-right: 0;
        margin-left: 16px;
      }
      .example-link-icon {
        margin-right: 0;
        margin-left: 8px;
      }
    }
    .example-link {
      line-height: 24px;
      margin-right: 16px;
    }
    .example-link-icon {
      margin-right: 8px;
    }
    .content p {
      margin-bottom: 1em;
      color: rgba(0, 0, 0, 0.85);
      overflow-wrap: break-word;
    }
  }
  @media (max-width: 768px) {
    .demo {
      .image {
        flex: 100%;
        margin: 24px 0 0;
      }
    }
  }
</style>
